// pages/reportInformation/reportInformation.js
const { baseURL } = require("../../utils/request")
import * as echarts from '../../components/ec-canvas/echarts';

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  data: {
    ec: {
      lazyLoad: true, //延迟加载
    },
    dataArr: [],
    topList: [],
    bottomList: []
  },
  // 获取当前月的每一天日期
  getEveryDay() {
    let curDate = new Date();
    let curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    let day = curDate.getDate();
    let d = new Date().getDate()
    // 获取当前日期
    let date = new Date();
    // 获取当前月份
    let nowMonth = date.getMonth() + 1;
    // 对月份进行处理，1-9月在前面添加一个“0”
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = "0" + nowMonth;
    }
    for (let k = 1; k <= d; k++) {
      // 对日期进行处理，1-9号在前面添加一个“0”
      if (k >= 0 && k <= 9) {
        k = "0" + k;
      }
      this.data.dataArr.push(`${nowMonth}/${k}`);
    }
    this.setData({
      dataArr: this.data.dataArr.reverse(),
    })
  },
  getEveryInfo() {
    wx.request({
      url: `${baseURL}/wechat/appointment/listInfoNumber`,
      success: (res) => {
        this.setData({
          dataArr: this.data.dataArr.reverse(),
          topList: res.data.data[0],
          bottomList: res.data.data[1]
        })
        console.log("res", res);
        this.loadBar(this.data.dataArr.reverse(), res.data.data[0], res.data.data[1])
      }
    })
  },
  // echarts图
  loadBar(date, salesR, stockroomR) {
    let line = this.selectComponent('#mychart-dom-line')
    line.init((canvas, width, height, dpr) => {
      const lineChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      })
      var lineOperation = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
            name: '预约数',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#3097FE', //改变折线点的颜色
                lineStyle: {
                  color: '#3097FE' //改变折线颜色
                }
              }
            },
            data: salesR
          },
          {
            name: '销售额',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#4BB84B', //改变折线点的颜色
                lineStyle: {
                  color: '#4BB84B' //改变折线颜色
                }
              }
            },
            data: stockroomR
          }
        ],
        dataZoom: [{
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "80%",
            // 设置滚动条高度
            height: 5,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 1,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ]
      }
      lineChart.setOption(lineOperation)
      return lineChart
    })
  },
  //   var lineOperation = {
  //     title: {
  //       text: 'Stacked Area Chart'
  //     },
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'cross',
  //         label: {
  //           backgroundColor: '#6a7985'
  //         }
  //       }
  //     },
  //     legend: {
  //       data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  //     },
  //     toolbox: {
  //       feature: {
  //         saveAsImage: {}
  //       }
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true
  //     },
  //     xAxis: [
  //       {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //       }
  //     ],
  //     yAxis: [
  //       {
  //         type: 'value'
  //       }
  //     ],
  //     series: [
  //       {
  //         name: 'Email',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series'
  //         },
  //         data: [120, 132, 101, 134, 90, 230, 210]
  //       },
  //       {
  //         name: 'Union Ads',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series'
  //         },
  //         data: [220, 182, 191, 234, 290, 330, 310]
  //       },
  //       {
  //         name: 'Video Ads',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series'
  //         },
  //         data: [150, 232, 201, 154, 190, 330, 410]
  //       },
  //       {
  //         name: 'Direct',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series'
  //         },
  //         data: [320, 332, 301, 334, 390, 330, 320]
  //       },
  //       {
  //         name: 'Search Engine',
  //         type: 'line',
  //         stack: 'Total',
  //         label: {
  //           show: true,
  //           position: 'top'
  //         },
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series'
  //         },
  //         data: [820, 932, 901, 934, 1290, 1330, 1320]
  //       }
  //     ]
  //   }
  //   lineChart.setOption(lineOperation)
  //   return lineChart
  // })
  // },
  onLoad(options) {

    this.getEveryDay()
    this.getEveryInfo();
  },
  onReady() {}
});